<template>
  <div class="containe">
   <div class="nav-top" ref="nav-top">
      <ul class="ulWidth" style="left:0;">
         <li v-for="(item,index) in listImg" :key="index">
            <!--<img :src="item.img" alt=""/>-->
            <bigImg :srcPath="item.img" :listIndex="listIndex" class="bigImg"/>
         </li>
      </ul>
   </div>
   <div class="nav-bottom">
     <div class="leftContent" @click="prevFun">&lt;</div>
     <div class="middleContent">
         <ul class="ulContent">
           <li v-for="(item,index) in listImg" :key="index" :class="item.isActive?'active':''" @click="isThumb(index)">
              <img :src="item.img" alt=""/>
           </li>
      </ul>
    </div>
     <div class="rightContent" @click="nextFun">&gt;</div>
   </div>   
  </div>
</template>
<script>
import  bigImg  from './urlImg.vue';
// import HelloWorld from './components/Test.vue'
export default {
  name: 'HelloWorld1',
  components: {
    bigImg
  },
  data() {
    return {
        index:0,
        listIndex:0,
       listImg:[{
          img:require('../assets/image/nature-1.jpg')
        },{
          img:require('../assets/image/nature-2.jpg')
        },{
          img:require('../assets/image/nature-3.jpg')
        },{
          img:require('../assets/image/nature-4.jpg')
        },{
          img:require('../assets/image/nature-5.jpg')
        },{
          img:require('../assets/image/nature-6.jpg')
        },{
          img:require('../assets/image/nature-7.jpg')
        },{
          img:require('../assets/image/nature-8.jpg')
        },{
          img:require('../assets/image/nature-9.jpg')
        },{
          img:require('../assets/image/nature-10.jpg')
        },{
          img:require('../assets/image/nature-1.jpg')
        },{
          img:require('../assets/image/nature-2.jpg')
        },{
          img:require('../assets/image/nature-3.jpg')
        },{
          img:require('../assets/image/nature-4.jpg')
        },{
          img:require('../assets/image/nature-8.jpg')
        },{
          img:require('../assets/image/nature-9.jpg')
        },{
          img:require('../assets/image/nature-10.jpg')
        },{
          img:require('../assets/image/nature-1.jpg')
        },{
          img:require('../assets/image/nature-2.jpg')
        },],
    }

  },
  mounted(){
     var ulwidth=document.querySelector(".ulWidth");
     var ulContent=document.querySelector(".ulContent")
     ulwidth.style.width=540*this.listImg.length+"px"
     ulContent.style.width=100*this.listImg.length+"px"
    for(var i=0;i<this.listImg.length;i++){
        this.listImg[i].isActive=false
    }
    this.listImg[this.index].isActive=true

    
  },
  methods: {
   prevFun:function(){
       console.log("上一页")
      var ulwidth=document.querySelector(".ulWidth");
    //   var ulContent=document.querySelector(".ulContent")
      this.index--
      if(this.index<0){
          this.index=this.listImg.length-1
      }
      var newLeft;
      if(ulwidth.style.left=="0px"){
          newLeft=-(this.index)*540
      }else{
          newLeft=ulwidth.offsetLeft+540
      }
      this.perScroll(this.index)
      ulwidth.style.left=newLeft+'px';
      this.listIndex=this.index;
   },
   nextFun:function(){
       console.log("下一页")
       
        var ulwidth=document.querySelector(".ulWidth");
    //   var ulContent=document.querySelector(".ulContent")
      this.index++
      if(this.index>this.listImg.length-1){
          this.index=0
      }
      var newLeft;
      if(ulwidth.style.left=="-"+(this.listImg.length-1)*540+'px'){
         newLeft=0;
      }else{
          newLeft=ulwidth.offsetLeft-540
      }
      this.scrollBottom(this.index)
      ulwidth.style.left=newLeft+'px'
      this.listIndex=this.index;
   },
   isThumb(index){
        this.index=index
        console.log("点击第介个缩略图",index)
        var ulwidth=document.querySelector(".ulWidth");
        ulwidth.style.left='-'+this.index*540+'px';
         for(var i=0;i<this.listImg.length;i++){
        this.listImg[i].isActive=false
    }
         this.listImg[this.index].isActive=true
      this.listIndex=this.index;
   },
   scrollBottom(index){
        console.log("12",index)
        var ulContent=document.querySelector(".ulContent")
        if(index<5){
             ulContent.style.left=0+'px'
        }
        if(index>=5){
            if(index%5==0){
            ulContent.style.left=-index*100+'px'
        }else{
            ulContent.style.left=ulContent.offsetLeft+'px'
        }
        }
        // ulContent.style.left=-index*100+"px"
        for(var i=0;i<this.listImg.length;i++){
        this.listImg[i].isActive=false
         }
         this.listImg[this.index].isActive=true
   },
     perScroll(index){
         console.log("向前",index)
          var ulContent=document.querySelector(".ulContent")
         
        //   if(index%5==0){
            //  ulContent.style.left=-(this.index)*100+'px'
        //   }else{
            // ulContent.style.left=ulContent.offsetLeft+'px'
            //   if(index>=4){
        
                //  ulContent.style.left=-4*100+'px'
            //   }else{
                    // ulContent.style.left=0+'px'
            //   }
        //   }
        if((this.listImg.length-(index+1))%5==0){
            ulContent.style.left=-(this.index)*100+400+'px'
        }
        if(index==this.listImg.length-1){
            ulContent.style.left=-(this.index+1-5)*100+'px'
        }
        if(index<5){
            ulContent.style.left=0+'px'
        }

        // if(index%5==0){
        //     ulContent.style.left=-(this.index)*100+'px'
        // }
        for(var i=0;i<this.listImg.length;i++){
            this.listImg[i].isActive=false
         }
         this.listImg[this.index].isActive=true
     }
  },


  
}
</script>


<style scoped>
.containe{
    width:600px;
    height:540px;
    display: flex;
    flex-direction: column;
}
.nav-top{
    width:540px;
    height:400px;
    margin:0 auto;
    position: relative;
    overflow: hidden;

}
.nav-top ul{
    height:400px;
    position:absolute;
    overflow: hidden;
    border:1px solid red;
    display: flex;
    margin:0;
    padding:0;
}
.nav-top li{
    width:540px;
    height:100%;
    list-style: none;

}
.nav-top li img{
    width:100%;
    height:100%; 
}
.bigImg{
    width:100%;
    height:100%;  
}
.nav-bottom{
    width:540px;
    height:140px;
    margin:0 auto;
    display: flex;
}
.leftContent{
    width:20px;
    height:140px;
    color:#000;
    line-height: 140px;
    cursor: pointer;
}
.middleContent{
    width:500px;
    height:140px;
    position:relative;
    overflow: hidden;
}
.middleContent ul{
    height:140px;
    margin:0;
    padding:0;
    position: absolute;
    display: flex;
}
.middleContent ul li{
    width:80px;
    height:80px;
    margin:30px 10px;
    list-style: none;
}
.middleContent .active{
   border:2px solid red;
    background: #f3bfbf;
}
.middleContent ul li img{
    width:100%;
    height:100%;
}
.rightContent{
    width:20px;
    height:140px;
    color:#000;
    line-height: 140px;
    cursor: pointer;
}
</style>
